<template>
  <div class="all">  
    <el-button type="primary" plain @click="createdAdd" size="mini" icon="el-icon-plus">新建</el-button>
    <el-dialog
      title="新增"
      :visible.sync="addData.dialogVisibleAdd"
      width="760px"
      :before-close="handleClose"
    >
    <!-- {{addData.diaDataAdd}} -->
      <div class="list" v-for="(item,index) in addData.diaDataAdd" :key="index" v-if="item.addSign">
        <!-- {{addData.diaDataAdd}} -->
        <template v-if="item.addSign">
          <!-- input框 -->
          <div v-if="item.type==='input'&&item.addSign" class="lister">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              <span v-else style="color:white;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb">
              <el-input
                v-if="item.EN==='notes' || item.EN==='memo'"
                width="210px"
                type="textarea"
                v-model="addData.diaDataAdd[index].value"
                placeholder="请输入内容"
                clearable
                @blur="BurExp($event,item,index)"
                size="mini"
              ></el-input>
              <el-input
                v-model="addData.diaDataAdd[index].value"
                placeholder="请输入内容"
                clearable
                @blur="BurExp($event,item,index)"
                size="mini"
                v-else
              ></el-input>
            </span>
            <el-tooltip
              v-if="!item.result"
              class="item"
              effect="dark"
              :content="item.err"
              placement="top"
            >
              <el-button icon="el-icon-warning" circle></el-button>
            </el-tooltip>
            <!-- <span v-if="!item.result" class="font_color"></span> -->
          </div>
          <!-- 计数器 -->
          <div class="lister" :key="index" v-else-if="item.type==='number'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb">
              <!-- 标记：{{[item.attr]}} -->
              <el-input-number
                v-model="addData.diaDataAdd[index].value"
                :min="1"
                label="描述文字"
                size="mini"
              ></el-input-number>
            </span>
            <el-tooltip
              v-if="!item.result"
              class="item"
              effect="dark"
              :content="item.err"
              placement="top"
            >
              <el-button icon="el-icon-warning" circle></el-button>
            </el-tooltip>
          </div>
          <!-- 时间选择 -->
          <div class="lister" :key="index" v-else-if="item.type=='date'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
            <span class="inb" v-if="item.type=='date'&&item.addSign">
              <!-- {{addData.diaDataAdd[index].value}} -->
              <el-date-picker
                size="mini"
                v-model="addData.diaDataAdd[index].value"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="getSTime"
              ></el-date-picker>
            </span>
          </div>
          <!-- 下拉框 -->
          <div class="lister" :key="index" v-else-if="item.type=='select'&&item.addSign">
            <!-- v-for="(item,index) in addData.diaDataAdd" -->
            <!-- 字典 -->
            <!-- <dictionaries :searchData='diaDataAdd' :modelType='modelType' @optionData="dictionariesCallBack" @optionDataTable="dictionariesTableCallBack"></dictionaries> -->
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}:
            </span>
              <!-- {{superiorListOption}} -->
            <span v-if="item.EN ==='superior'" class="inb">
              <!-- {{addData.diaDataAdd[index].value}} -->
              <el-cascader
                v-model="addData.diaDataAdd[index].value"
                :show-all-levels='false'
                :options="superiorListOption"
                :props="{ checkStrictly: true }"
                clearable
              ></el-cascader>
            </span>
            <span v-else class="inb">
              <!-- 字典项 typeGroupCode-->
              <!-- {{addData.diaDataAdd[index].value}} -->
              <el-select
                v-if="item.typeGroupCode"
                v-model="addData.diaDataAdd[index].value"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="i in searchOption[item.EN]"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                ></el-option>
                <!-- <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option> -->
              </el-select>
              <!-- 租户管理员页面  --租户框 -->

              <el-select
                v-else-if="item.EN == 'sysCompanyCode'"
                v-model="addData.diaDataAdd[index].value"
                placeholder="请选择"
                size="mini"
                @change="sysCompanyCodeChange(addData.diaDataAdd[index].value)"
                clearable
              >
                <el-option
                  v-for="i in getFindByTypeData"
                  :key="i.value"
                  :label="i.name"
                  :value="i.sysCompanyCode"
                ></el-option>
              </el-select>
              <!-- 租户管理员页面  --角色框 -->
              <el-select
                v-else-if="item.EN == 'groupId'"
                v-model="addData.diaDataAdd[index].value"
                placeholder="请选择"
                size="mini"
                @change="sysRoleChange"
                clearable
                :disabled="addData.diaDataAdd[4].value==''"
              >
                <!-- 一个租户只对应一个角色 -->
                <!-- <el-option :label="roleObj.name" :value="roleObj.id"></el-option> -->
                <!-- {{roleArr}} -->
                <el-option v-for="i in roleArr" :key="i.id" :label="i.name" :value="i.id"></el-option>
              </el-select>
              <!-- 字典项 dictTable-->
              <el-select
                v-else-if="item.dictTable"
                v-model="addData.diaDataAdd[index].value"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="i in searchOptions[item.EN]"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                ></el-option>
              </el-select>
              <!-- 其他项 -->
              <!-- <div v-else>1212121212121</div> -->
              <el-select v-else v-model="addData.diaDataAdd[index].value" size="mini" placeholder="请选择">
                <el-option
                  v-for="item in addData.diaDataAdd[index].option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </span>
          </div>
          <!-- 多选框 -->
          <div class="Checkbox" :key="index" v-else-if="item.type=='Checkbox'&&item.addSign">
            <span class="fon">
              <span v-if="!item['skipSign']" style="color:red;">*</span>
              {{item.CN}}
            </span>
            <span class="inb" v-if="item.type=='Checkbox'&&item.addSign">
              <el-checkbox v-model="addData.diaDataAdd[index].value"></el-checkbox>
            </span>
          </div>
        </template>
      </div>
        <el-form ref="myForm" :model="form" :rules="infoRules" class="form">
            <el-form-item label="合同模板" style="text-align:left;" prop="contractTmpl" class="item">
                <el-upload
                  class="upload-demo"
                  action=""
                  :show-file-list="false"
                  :auto-upload="false"
                  :on-change='contractTmpl'
                  accept=".pdf"
                >
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <span>{{contractTmplName}}</span>
                </el-upload>
            </el-form-item>
            <el-form-item label="立户协议pdf" style="text-align:left;" prop="openAGRT" class="item">
                <el-upload
                  class="head-upload"
                  action=""
                  :show-file-list="false"
                  :auto-upload='false'
                  :on-change='openAGRT'
                  accept=".pdf"
                >
                  
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <span>{{openAGRTName}}</span>
                </el-upload>
            </el-form-item>
            <el-form-item label="个人报装协议pdf" style="text-align:left;" prop="installAGRT1" class="item">
                <el-upload
                  class="head-upload"
                  action=""
                  :show-file-list="false"
                  :auto-upload='false'
                  :on-change='installAGRT1'
                  accept=".pdf"
                >              
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <span>{{installAGRT1Name}}</span>
                </el-upload>
            </el-form-item>
            <el-form-item label="单位报装协议pdf" style="text-align:left;" prop="installAGRT2" class="item">
                <el-upload
                  class="head-upload"
                  action=""
                  :show-file-list="false"
                  :auto-upload='false'
                  :on-change='installAGRT2'
                  accept=".pdf"
                >              
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <span>{{installAGRT2Name}}</span>
                </el-upload>
            </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toAdd" size="mini">确 定</el-button>
        <el-button @click="addData.dialogVisibleAdd = false" size="mini">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSelectByCodeAndType1,
  getSelectByCodeAndType //用于添加租户管理员时选择租户后之间传回选择租户的角色：
} from "@/api/TenantAdministratorManagement";
// 字典
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  data() {
    return {    
        infoRules:{},
        form: {
            contractTmpl:'',
            openAGRT:'',
            installAGRT1:'',
            installAGRT2:'',
        },
        contractTmplName:'',
        openAGRTName:'',
        installAGRT1Name:'',
        installAGRT2Name:'',
      // 租户管理员  租户-角色数据
      sysCompanyCodeRolesData: this.$parent.sysCompanyCodeRoles,
      //添加数据模型
      addData: {
        //弹窗控制
        dialogVisibleAdd: false,
        //数据字典
        diaDataAddDictionaries: [],
        //添加弹窗的数据模型
        diaDataAdd: [],
        //确定的disabled，
        mainDisabled: true,
        eventualData: undefined
      },
      // selectData:[]
      selectOptions: [
        {
          value: 1,
          label: "微山自来水",
          children: [
            {
              value: 2,
              label: "幸福苑小区",
              children: [{ value: 3, label: "1号楼" }]
            }
          ]
        },
        {
          value: 4,
          label: "泗水县",
          children: [
            {
              value: 5,
              label: "花园小区",
              children: [
                { value: 6, label: "1号楼" },
                { value: 7, label: "2号咯" },
                { value: 8, label: "2号咯" },
                { value: 9, label: "2号咯" }
              ]
            },
            {
              value: 10,
              label: "荣盛小区"
            }
          ]
        }
      ],
      superiorData: "",
      // 组件类型
      modelType: "search",
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      checked: false,
      // 备注  文本域
      textarea: "",
      // 返回的角色对象
      roleArr: [],
      superiorListOptionData:[]
    };
  },
  props: [
    //添加传过来的值
    "diaDataAdd",
    "optionsZi",
    "searchOptionTable",
    "getFindByTypeData",
    "sysCompanyCodeRoles",
    "superiorListOption"
  ],
  mounted() {
    this.addData.diaDataAdd = JSON.parse(JSON.stringify(this.diaDataAdd));
  },
  methods: {
    contractTmpl(params){
        this.loading = true
        console.log(params);
        this.form['contractTmpl'] = params.raw
        this.contractTmplName = params.name
    },
    openAGRT(params){
        this.loading = true
        this.form['openAGRT'] = params.raw
        this.openAGRTName = params.name
    },
    installAGRT1(params){
        this.loading = true
        this.form['installAGRT1'] = params.raw
        this.installAGRT1Name = params.name
    },
    installAGRT2(params){
        this.loading = true
        this.form['installAGRT2'] = params.raw
        this.installAGRT2Name = params.name
    },
    changeSuperior(newValue){
      let optionDatas = newValue
      // let optionDatas = this.superiorListOption
      this.changeOptionKey(optionDatas)
      console.log(optionDatas,88888888);   
      // --------
      // 转换value,label  ---------------
      // optionDatas.forEach(item => { 
      //   for(var key in item) {
      //       if( key === 'id' ) {
      //           item['value'] = item[key]
      //           delete item[key]                              
      //       }
      //       if( key === 'name') {
      //           item['label'] = item[key]
      //           delete item[key]     
      //       }  
      //       if( key === 'children') {
      //           item['label'] = item[key]
      //           delete item[key]     
      //       }  
      //   }                                  
      //   Obj[EN] = optionDatas
      // })
    },
    // 循环遍历
    changeOptionKey(option){
      option.forEach(item =>{
        for (let key in item){
          if( key === 'id' ) {
            item['value'] = item[key]
            delete item[key]                              
          }
          if( key === 'name') {
            item['label'] = item[key]
            delete item[key]     
          }  
          if( key === 'children') {
            this.changeOptionKey(item[key])     
          } 
        }
      })
    },
    // 角色
    sysRoleChange(newvalue) {
      console.log(8888888888888);

      const roleArrs = this.roleArr;
      console.log(999999999999);

      var id = "";
      for (let index = 0; index < roleArrs.length; index++) {
        const element = roleArrs[index];
        id = roleArrs[index].id;
      }
      this.$emit("sysRoleId", id);
      console.log(id);
    },
    // 租户管理员页面  如果改变触发
    async sysCompanyCodeChange(value) {
      console.log(value, "duime");
      // console.log(this.$parent.getSelectByCodeAndTypeData(value));
      const res = await getSelectByCodeAndType1(value);
      console.log(
        res,
        "子组件用于添加租户管理员时选择租户后之间传回选择租户的角色"
      );
      const roleObjs = res.data;
      if (roleObjs) {
        console.log(roleObjs);

        this.roleArr = roleObjs;
      } else {
        console.log("该租户没有对应的角色");
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.addData.dialogVisibleAdd = false
          done();
        })
        .catch(_ => {});
    },
    // handleCloses(done) {
    //   this.$confirm("确认关闭？")
    //     .then(_ => {
    //       this.addData.dialogVisibleAdd = false;
    //       done();
    //     })
    //     .catch(_ => {});
    // },
    //搜索框内容传递给父元素
    createdAdd() {
      this.addData.dialogVisibleAdd = true;
      // this.$emit('createdAddDo','点击新增')
      //清空value;
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        this.addData.diaDataAdd[i].value = "";
        this.addData.diaDataAdd[i].result = true;
      }
      // 清空上传数据
      this.form.contractTmpl = ''
      this.form.openAGRT = ''
      this.form.installAGRT1 = ''
      this.form.installAGRT2 = ''
    },
    //添加-传给父组件，ajax
    toAdd() {
        console.log(this.form,999);
        console.log(this.addData.diaDataAdd,999);
        // debugger
      let numberqq = 1
      let bur = true;   
      let attrArr = [];
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        //console.log(this.addData.diaDataAdd[i].EN);    || at.value == ""
        let at = this.addData.diaDataAdd[i];
        //at.result === false || at.value == ""
        //sign
        if (at.addSign && !at["skipSign"]) {
          console.log(at.CN,88888);
          
          if (at.result === false || at.value === "") {
            // 判断红色星号    是否必须为空
            console.log(at.value,22);
            // numberqq +=1
            bur = false
            break
            
            // if (!at["skipSign"]) {
            //   bur = false;
            //   // bur = true;
            //   console.log(at.result,at.value,8222,at);
            //   break;
            // }
            // else{
            //   // bur = false;
            // }
          }
        } else {
          if (at.result === false) {
            bur = false
            break 
          }
          
        }
      }
      console.log(bur,8881111,numberqq);
      // if (this.superiorData.length !=0) {
      //   bur = true
      // }
      // console.log(bur,888);
      // if (this.checked.length !=0) {
      //   bur = true
      // }
      // checked
      console.log(bur);

      if (bur === true) {
          console.log(this.addData.diaDataAdd,666);
          // debugger
        //   传递之前  修改传递参数的数据以及数据格式
        let abc = this.addData.diaDataAdd
        let def = this.form
        let canData = {
            abc,
            def
        }
        this.$emit("toAdd", canData);
        // console.log(this.addData.diaDataAdd,'这是什么');
        // console.log(")))))))))))))))))))))))");
        this.addData.dialogVisibleAdd = false;
      } else {
        // console.log(this.superiorData.length !=0,'ceshi');       
        this.$message({
          message:'请添加全部参数，并符合标准！',
          type:'warning'
        })
        // alert("请添加全部参数，并符合标准！");
      }
    },

    //删除-传给父组件，ajax
    toDelete() {
      this.$emit("toDelete", "点击了删除");
    },

    getSTime(val) {
      this.addData.diaDataAdd.createTime = val;
    },
    //正则表达式
    BurExp(e, item, index) {
      if (this.addData.diaDataAdd[index].skipSign && e.target.value === '') {
        item.result = true;
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value);
        item.result = boolean;
        this.addData.diaDataAdd[index].result = boolean;
        console.log(item.result,999);
      }
      // let boolean = new RegExp(item.Exp).test(e.target.value);
      // this.addData.diaDataAdd[index].result = boolean;
    },
    // 新增   租户特殊请求
    getSelectByCodeAndTypeDatas() {
      console.log(this.$parent.getSelectByCodeAndTypeData, "zhegeshishsi");
    }
  },
  created() {
    this.getSelectByCodeAndTypeDatas();
  },
  watch: {
    optionsZi(newVal) {
      this.searchOption = newVal;
    },
    searchOptionTable(newVal) {
      this.searchOptions = newVal;
    },
    diaDataAdd:{
      deep:true,
      handler(newVal,oldVal){
        this.addData.diaDataAdd = JSON.parse(JSON.stringify(newVal));
      }
    },
    superiorListOption(newVal){
      // this.changeSuperior(newVal)

    }
  }
};
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.all {
  .is-plain {
    // width: 84px;
    // height: 34px;
    // /deep/.el-icon-plus{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  .allDelete {
    // width: 110px;
    // /deep/.el-icon-delete{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  display: inline-block;
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    .lister {
      height: 44px;
      width: 370px;
      .fon {
        text-align: right;
        margin-right: 14px;
        width: 99px;
      }
      .inb {
        .el-input {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-textarea {
          /deep/.el-textarea__inner {
            width: 210px;
            height: 60px;
          }
        }
      }
    }
    .is-circle {
      margin-left: 3px;
      padding: 0;
      color: #e69620;
      border: 0;
      /deep/.el-icon-warning {
        height: 14px;
        width: 14px;
      }
    }
    .font_color {
      font-size: 12px;
      padding-left: 100px;
      padding-top: 10px;
    }
  }
//   .form{
//       display: flex;
//       margin-top: 30px;
//       flex-direction:row;
//       flex-wrap:wrap;
//       .item{
//           width: 50%;
//       }
//   }
  /deep/.el-form{
      display: flex;
      margin-top: 30px;
      flex-direction:row;
      flex-wrap:wrap;
      .el-form-item {
          width: 100%;
          .el-form-item__label {
              width: 130px!important;

          }
      }
  }
}
</style>
